{% if isFramework("vue") %}
When a Vue component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell and
row values available to you via `this.params`.

The interface for a custom floating filter component is as follows:

```ts
interface FloatingFilterDisplay {
    // Mandatory methods

    // A hook to perform any necessary operations when the column definition is updated.
    refresh(params: FloatingFilterDisplayParams): void;

    // Optional methods

    // Gets called every time the popup is shown, after the GUI returned in
    // getGui is attached to the DOM. This is useful for any logic that requires attachment
    // before executing, such as putting focus on a particular DOM element. 
    afterGuiAttached?(params?: IAfterGuiAttachedParams): void;

    // Gets called when the column is destroyed. If your custom filter needs to do
    // any resource cleaning up, do it here. A filter is NOT destroyed when it is
    // made 'not visible', as the GUI is kept to be shown again if the user selects
    // that filter again. The filter is destroyed when the column it is associated with is
    // destroyed, either when new columns are set into the grid, or the grid itself is destroyed.
    destroy?(): void;
}
```

### Custom Floating Filter Parameters

When a Vue component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell and
row values available to you via `this.params` - the interface for what is provided is documented below.

If custom params are provided via the `colDef.floatingFilterComponentParams` property, these
will be additionally added to the params object, overriding items of the same name if a name clash exists.
{% /if %}
